<template>
    <li class="itm">
        <div class="gface">
            <a :href="userRoute" class="ficon">
                <img :src="avatarImgUrl" :alt="username">
            </a>
        </div>
        <div class="gcnt">
            <div class="dcntc">
                <div class="type f-pr f-fs1">
                    <a :href="userRoute" class="s-fc7">
                        {{ username }}
                    </a>
                    <span class="u-icn-new-wrap" v-if="isV">
                        <img class="u-icn-new" :src="vImgUrl">
                    </span>
                    <span class="sep s-fc3">分享单曲</span>
                </div>
                <div class="time">
                    <a class="s-fc4" href="/event?id=">
                        {{ datetime }}
                    </a>
                </div>
                <div class="text f-fs1 f-brk">
                    {{ desc }}
                </div>
                <div class="j-flag">
                    <div>
                        <div class="src clear-block">
                            <div class="cover cover-ply">
                                <span class="lnk">
                                    <img :src="recommendSmallImgUrl">
                                </span>
                                <a href="javascript:;" id="xx" class="ply u-dicn u-dicn-play"></a>
                            </div>
                            <div class="scnt">
                                <h3 class="tit f-thide f-fs1">
                                    <span class="tag u-dtag">
                                        专辑
                                        <i class="rt"></i>
                                    </span>
                                    <a :href="songRoute" class="fc1">{{ songName }}</a>
                                </h3>
                                <h4 class="from f-thide s-fc3">
                                    <a :href="artistRoute" :title="artist" class="s-fc3">
                                        {{ artist }}
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                    <div>
                        <ul class="pics f-cb j-flag clear-block">
                            <li class="pic clear">
                                <img class="f-img j-img f-curbig" :src="recommendImgUrl">
                            </li>
                        </ul>
                        <div class="showpic j-flag f-hide">
                            <div class="btns">
                                <a href="javascript:;" class="btn s-fc3">
                                    <i class="icn u-dicn u-dicn-up-close"></i>
                                </a>
                                收起
                                <span class="line">|</span>
                                <a href="javascript:;" class="btn s-fc3">
                                    <i class="icn u-dicn u-dicn-search"></i>
                                    查看原图
                                </a>
                                <span class="line">|</span>
                                <a href="javascript:;" target="_blank" class="btn s-fc3 j-flag">
                                    <i class="icn u-dicn u-dicn-download"></i>
                                    下载
                                </a>
                            </div>
                            <div class="slide slide-loading f-sltnone f-pr">
                                <div class="wrap">
                                    <img class="j-flag thepic" src alt title style="display:none">
                                </div>
                                <div class="pages j-flag"></div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="doper j-flag">
                    <a href="javascript:;" class="s-fc7">
                        <i class="icn u-dicn u-dicn-good"></i>
                        <span class="j-flag">({{ likeCount }})</span>
                    </a>
                    <span class="line">|</span>
                    <a href="javascipt:;" class="s-fc7">
                        转发
                        <span class="j-flag">({{ shareCount }})</span>
                    </a>
                    <span class="line">|</span>

                    <a href="javascript:;" class="s-fc7">
                        评论
                        <span class="j-flag">({{ commentCount }})</span>
                    </a>
                </div>
                <div class="arrow u-dicn u-dicn-down-arrow j-flag" style="display: none;" title="动态管理">
                    <div class="dsup j-flag f-hide"></div>
                    <div class="j-flag f-hide"></div>
                </div>

                <div class="j-flag f-hide"></div>

            </div>
        </div>

    </li>
</template>
<script setup>
defineProps({
    "avatarImgUrl": String,
    "recommendImgUrl": String,
    "recommendSmallImgUrl": String,
    "datetime": String,
    "username": String,
    "desc": String,
    "songName": String,
    "artist": String,
    "likeCount": Number,
    "shareCount": Number,
    "commentCount": Number,
    "userRoute": String,
    "songRoute": String,
    "vImgUrl": String,
    "artistRoute": String,
    "isV": Boolean
})
</script>
<style lang="scss" scoped>
.itm {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid;

    .gface {
        position: absolute;
        top: 20px;
        left: 0;
        width: 54px;

        .ficon {
            float: left;
            position: relative;
            zoom: 1;
            width: 45px;
            height: 45px;

            img {
                display: block;
                width: 100%;
            }


        }

    }

    .gcnt {
        position: relative;
        zoom: 1;
        margin-left: 55px;
        padding-top: 4px;

        .type {
            .sep {
                margin-left: 5px;
            }

            .u-icn-new-wrap {
                position: relative;
                display: inline-block;
                width: 15px;
                height: 15px;
                margin: 2px 0 0 2px;
                vertical-align: top;

                .u-icn-new {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 15px;
                    height: 15px;
                }



            }


        }

        .time {
            margin-top: 7px;
        }

        .text {
            margin-top: 10px;
            line-height: 24px;
            font-size: 14px;
            word-break: break-word;
        }

        .src {
            background: #f5f5f5;
            display: block;
            position: relative;
            padding: 10px;
            margin: 4px 0 5px;

            .scnt {
                display: block;
                position: absolute;
                top: 10px;
                left: 60px;
                right: 30px;
                height: 40px;
                line-height: 22px;

                .tag{
                    position: relative;
                    top: -1px;
                    zoom: 1;
                    margin-right: 6px;
                }

                h3,
                h4 {
                    font-weight: normal;

                }

                h3 {
                    margin-top: -2px;
                }

            }

            .cover {
                position: relative;
                zoom: 1;
                width: 40px;
                height: 40px;
                float: left;

                img {
                    display: block;
                    width: 40px;
                    height: 40px;
                }

                .ply {
                    display: block;
                    z-index: 200;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 40px;
                    height: 40px;
                    margin: 0;
                    background-position: -100px -70px;
                    opacity: 0.8;
                    cursor: pointer;

                    &:hover {
                        opacity: 1;
                    }
                }


            }
        }

        .pics {
            .clear {
                clear: left;
            }

            .pic {
                float: left;
                position: relative;
                zoom: 1;
                width: 224px;
                height: 224px;
                margin-left: 4px;
                margin-top: 4px;
                background-color: #e5e5e5;
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .showpic {
                .btns {
                    padding: 12px 0 12px 20px;
                    line-height: normal;

                    .icn {
                        margin: 1px 2px 0 0;
                    }

                    .line {
                        color: #ddd;
                        margin: 0 7px 0 10px;
                    }
                }

                .slide {
                    width: 525px;
                    padding-top: 1px;
                    min-height: 306px;
                    margin: 0 auto;

                    .thepic {
                        display: block;
                        min-width: 100px;
                        min-height: 100px;
                        max-width: 100%;
                        margin: 0 auto;
                    }

                    .pages {
                        height: 16px;
                        text-align: center;
                    }
                }
            }
        }

        .doper {
            margin: 18px 0 -2px;
            text-align: right;
            line-height: normal;

            .icn {
                margin: -2px 3px 0 0;
            }

            .line {
                color: #c7c7c7;
                margin: 0 10px 0 12px;
            }

            .u-dicn-good {
                margin-top: 3px;
            }
        }

        .arrow {
            position: absolute;
            top: -3px;
            right: -3px;
            cursor: pointer;
        }

        .dsup {
            margin: 30px 0;
        }

    }
}
</style>